<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="outer" v-loading="loading">
        <section class="top-part">
            <Topbar></Topbar>
        </section>
        <section class="left-part">
            <toolbar  v-if="pageKey != 'messages'"/>
            <div v-else class="toast">
                <div><i class="el-icon-warning"></i> 该页面为系统页面，不可编辑</div>
            </div>
        </section>
        <section class="middle-part">
            <page></page>
        </section>
        <section class="right-part">
            <editor v-if="pageKey != 'messages'"/>
            <div v-else class="toast">
                <div><i class="el-icon-warning"></i> 该页面为系统页面，不可编辑</div>
            </div>
        </section>

        <WeappInit></WeappInit>

    </div>
</template>

<style scoped>
::-webkit-scrollbar {
    width: 0px;
}

.outer {
    width: 100%;
    max-height: 100vh;
    position: relative;
    background: #f4f4f4;
    overflow: hidden;
}

.left-part {
    background: #ffffff;
    width: 300px;
    /* height: 100%; */
    height: calc(100% - 60px);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    top: 60px;
    overflow-y: scroll;
    padding: 20px;
    /* z-index: 2002; */
}

.right-part {
    background: #ffffff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    min-width: 400px;
    max-width: 500px;
    width: auto;
    transition: all 0.5s;
    /* height: 100%; */
    height: calc(100% - 60px);
    position: absolute;
    right: 0;
    top: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow-y: scroll;
}

.top-part {
    width: 100%;
    height: 57px;
    padding: 0 10px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* position: fixed; */
    top: 183px;
    right: 0;
    z-index: 10;
    box-sizing: border-box;
}

.top-part .left {
    font-size: 14px;
    /* font-weight: bold; */
    /* color: #fff; */
    display: flex;
    align-items: center;
}

.top-part .btns {
    display: flex;
}

.middle-part {
    width: 100%;
    padding-left: 300px;
    padding-right: 500px;
    padding-top: 110px;
}
.toast{
    display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;
    color: #cecece;
}

</style>

<script>
import Vue from "vue";
import Toolbar from "./Toolbar";
import Page from "./Page";
import Editor from "./Editor";
import WeappInit from './weappinit/index.vue'
import Topbar from './Topbar.vue';
export default {
    name: "pagemaker",
    props: {
        btns: {
            type: Object,
            default: null,
        },
    },
    components: {
      Toolbar,
      Topbar,
      Page,
      Editor,
      WeappInit,
    },
    data() {
        return {
            loading: false,
        };
    },

    computed: {
        pageKey: function () {
            return this.$store.state.pagemaker.pageKey;
        },
    },

    methods: {
      
    },
};
</script>
